<template>
  <div>
    <div class="container">
      <Header />
      <NavBar />
      <!-- 轮播图及侧边框模块 -->
      <div class="sideBar">
        <Swiper />
        <div class="nav">
          <ul>
            <!-- 手机 -->
            <li>
              <a href="">手机</a>
              <a>></a>
              <div class="pop">
                <div class="left" v-for="item in PhoneList" :key="item.id">
                  <div>
                    <div class="xuangou_left">
                      <!-- rows[66].s_goods_photos[0] -->
                      <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                      <div class="img">
                        <a :href="`#/detail/${item.id}`">
                          <img v-lazy="item.s_goods_photos[0].path" alt="" />
                          <span>{{ item.name }}</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <!-- 电视 -->
            <li>
              <a href="">电视</a>
              <a>></a>
              <div class="pop">
                <div class="left" v-for="item in TVList" :key="item.id">
                  <div>
                    <div class="xuangou_left">
                      <!-- rows[66].s_goods_photos[0] -->
                      <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                      <div class="img">
                        <a :href="`#/detail/${item.id}`">
                          <img v-lazy="item.s_goods_photos[0].path" alt="" />
                          <span>{{ item.name }}</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <!-- 笔记本 平板 -->
            <li>
              <a href="">笔记本 平板</a>
              <a>></a>
              <div class="pop">
                <div class="left" v-for="item in ComputerList" :key="item.id">
                  <div>
                    <div class="xuangou_left">
                      <!-- rows[66].s_goods_photos[0] -->
                      <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                      <div class="img">
                        <a :href="`#/detail/${item.id}`">
                          <img :src="item.s_goods_photos[0].path" alt="" />
                          <span>{{ item.name }}</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <!-- 家电 -->
            <li>
              <a href="">家电</a>
              <a>></a>
              <div class="pop">
                <div class="left" v-for="item in HouseList" :key="item.id">
                  <div>
                    <div class="xuangou_left">
                      <!-- rows[66].s_goods_photos[0] -->
                      <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                      <div class="img">
                        <a :href="`#/detail/${item.id}`">
                          <img v-lazy="item.s_goods_photos[0].path" alt="" />
                          <span>{{ item.name }}</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <!-- 出行 穿戴 -->
            <li>
              <a href="">出行 穿戴</a>
              <a>></a>
              <div class="pop">
                <div class="left" v-for="item in WatchList" :key="item.id">
                  <div>
                    <div class="xuangou_left">
                      <!-- rows[66].s_goods_photos[0] -->
                      <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                      <div class="img">
                        <a :href="`#/detail/${item.id}`">
                          <img :src="item.s_goods_photos[0].path" alt="" />
                          <span>{{ item.name }}</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <!-- 智能 路由器 -->
            <li>
              <a href="">智能 路由器</a>
              <a>></a>
              <div class="pop">
                <div class="left" v-for="item in IntellectList" :key="item.id">
                  <div>
                    <div class="xuangou_left">
                      <!-- rows[66].s_goods_photos[0] -->
                      <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                      <div class="img">
                        <a :href="`#/detail/${item.id}`">
                          <img v-lazy="item.s_goods_photos[0].path" alt="" />
                          <span>{{ item.name }}</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <!-- 电源 配件 -->
            <li>
              <a href="">电源 配件</a>
              <a>></a>
              <div class="pop">
                <div class="left" v-for="item in PartsList" :key="item.id">
                  <div>
                    <div class="xuangou_left">
                      <!-- rows[66].s_goods_photos[0] -->
                      <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                      <div class="img">
                        <a :href="`#/detail/${item.id}`">
                          <img v-lazy="item.s_goods_photos[0].path" alt="" />
                          <span>{{ item.name }}</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <!-- 健康 儿童 -->
            <li>
              <a href="">健康 儿童</a>
              <a>></a>
              <div class="pop">
                <div class="left" v-for="item in HealthList" :key="item.id">
                  <div>
                    <div class="xuangou_left">
                      <!-- rows[66].s_goods_photos[0] -->
                      <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                      <div class="img">
                        <a :href="`#/detail/${item.id}`">
                          <img v-lazy="item.s_goods_photos[0].path" alt="" />
                          <span>{{ item.name }}</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <!-- 耳机 音响 -->
            <li>
              <a href="">耳机 音响</a>
              <a>></a>
              <div class="pop">
                <div class="left" v-for="item in EodsList" :key="item.id">
                  <div>
                    <div class="xuangou_left">
                      <!-- rows[66].s_goods_photos[0] -->
                      <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                      <div class="img">
                        <a :href="`#/detail/${item.id}`">
                          <img v-lazy="item.s_goods_photos[0].path" alt="" />
                          <span>{{ item.name }}</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <!-- 生活 箱包 -->
            <li>
              <a href="">生活 箱包</a>
              <a>></a>
              <div class="pop">
                <div class="left" v-for="item in LifeList" :key="item.id">
                  <div>
                    <div class="xuangou_left">
                      <!-- rows[66].s_goods_photos[0] -->
                      <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                      <div class="img">
                        <a :href="`#/detail/${item.id}`">
                          <img v-lazy="item.s_goods_photos[0].path" alt="" />
                          <span>{{ item.name }}</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="Home">
          <div class="mbox1">
            <ul>
              <li>
                <a href=""
                  ><img src="/images/sh01.png" alt="" />
                  <div class="intext">保障服务</div>
                </a>
              </li>
              <li>
                <a href=""
                  ><img src="/images/sh02.png" alt="" />
                  <div class="intext">企业团购</div>
                </a>
              </li>
              <li>
                <a href=""
                  ><img src="/images/sh3.png" alt="" />
                  <div class="intext">F码通道</div>
                </a>
              </li>
            </ul>
            <ul>
              <li>
                <a href=""
                  ><img src="/images/sh4.png" alt="" />
                  <div class="intext">米粉卡</div>
                </a>
              </li>
              <li>
                <a href=""
                  ><img src="/images/sh5.png" alt="" />
                  <div class="intext">以旧换新</div>
                </a>
              </li>
              <li>
                <a href=""
                  ><img src="/images/sh6.png" alt="" />
                  <div class="intext">话费充值</div>
                </a>
              </li>
            </ul>
          </div>
          <div class="mbox">
            <a href="">
              <img src="/images/mxbox01.jpg" alt="" />
            </a>
          </div>
          <div class="mbox">
            <a href="">
              <img src="/images/mxbox02.jpg" alt="" />
            </a>
          </div>
          <div class="mbox">
            <a href="">
              <img src="/images/mxbox03.png" alt="" />
            </a>
          </div>
        </div>
      </div>
      <Content />
      <Product />
      <!-- 视频模块 -->
      <div class="videoBox">
        <div class="hz">
          <h2>视频</h2>
        </div>
        <div class="vb_Content">
          <div id="sp">
            <img src="/images/sp01.webp" width="100%" height="180" alt="" />
            <div class="n1">2021年春季新品发布会第一场</div>
          </div>
          <div id="sp">
            <img src="/images/sp02.webp" width="100%" height="180" alt="" />
            <div class="n1">Redmi 10X系列发布会</div>
            <div class="n2">Redmi 10X系列发布会</div>
          </div>
          <div id="sp">
            <img src="/images/sp03.webp" width="100%" height="180" alt="" />
            <div class="n1">小米10 青春版 发布会</div>
          </div>
          <div id="sp">
            <img src="/images/sp04.webp" width="100%" height="180" alt="" />
            <div class="n1">小米10 8K手机拍大片</div>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Nav from "./Nav.vue";
import Swiper from "../components/Swiper.vue";
import Content from "../components/Content.vue";
import Product from "../components/Product.vue";
import Footer from "../components/Footer.vue";
import NavBar from "../components/NavBar.vue";
import { getGoods } from "@/assets/js/request.js";
// import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
export default {
  // name: "Products",
  components: {
    Header,
    Nav,
    Swiper,
    Content,
    Product,
    Footer,
    NavBar,
  },
  data() {
    return {
      list: [],
      PhoneList: [],
      TVList: [],
      ComputerList: [],
      HouseList: [],
      WatchList: [],
      IntellectList: [],
      PartsList: [],
      HealthList: [],
      EodsList: [],
      LifeList: [],
    };
  },
  async created() {
    //侧边框
    //手机
    let phone = await getGoods(5);
    // this.list = phone.rows;
    this.PhoneList = phone.rows;

    //电视
    let tv = await getGoods(15);
    this.TVList = tv.rows;

    //电脑
    let Computer = await getGoods(34);
    this.ComputerList = Computer.rows;

    //家电
    let House = await getGoods(48);
    this.HouseList = House.rows;

    //出行
    let Watch = await getGoods(59);
    this.WatchList = Watch.rows;

    //智能
    let Intellect = await getGoods(60);
    this.IntellectList = Intellect.rows;

    //配件
    let Parts = await getGoods(61);
    this.PartsList = Parts.rows;

    //健康
    let Health = await getGoods(62);
    this.HealthList = Health.rows;

    // 耳机
    let Eods = await getGoods(63);
    this.EodsList = Eods.rows;

    //生活
    let Life = await getGoods(64);
    this.LifeList = Life.rows;
  },
};
</script>

<style lang="scss">
@import "@/assets/scss/base.scss";
@import "@/assets/scss/reset.scss";
@import "@/assets/scss/index.scss";
</style>